<template>
  <view class="reportlist_container app_container_page">
    <pullRefreshView class="pullRefreshView" ref="pullRefreshView" :fetchFn="fetchList">
      <template v-slot:default="{ list }">
        <appReportItem v-for="item of list" :item="item" :key="item.reportId" @REPORT_ITEM_CLICK="handleItemClick" />
      </template>
    </pullRefreshView>
  </view>
</template>

<script>
import { getReportList } from '@/api/report'
import appReportItem from '@/components/app/app_report_item'
export default {
  name: 'reportlist',
  components: {
    appReportItem
  },
  data() {
    return {
      studentId: null
    }
  },
  methods: {
    fetchList(params) {
      const that = this.$parent
      return getReportList({
        ...params,
        isLock: '',
        studentId: that.studentId
      })
    },
    handleItemClick(item) {
      // console.log(item)
      uni.navigateTo({
        url: `/pagesSub/report/detail?id=${item.reportId}`
      })
    }
  },
  onReachBottom() {
    this.$refs.pullRefreshView.fetchList()
  },
  onLoad(option) {
    this.studentId = option.id
  }
}
</script>

<style lang="scss">
.reportlist_container {
  padding: 30rpx;
  background-image: url('#{$BASEURL}/bg-no-wave.png');
  background-size: contain;
}
</style>
